<template>
    <div class="app_box">
        <div class="background">
            <el-carousel
                height="auto"
                arrow="never"
                indicator-position="none"
                autoplay
                :interval="2000"
                :pause-on-hover="false">
                <el-carousel-item
                    v-for="item in img_list"
                    :key="item"
                    style="height: 100vh; width: 100vw">
                    <img
                        :src="item"
                        style="height: 100vh; width: 100vw" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="login_register">
            <router-view></router-view>
        </div>
        <div
            class="mask"
            v-if="store.msak_is_none"></div>
    </div>
</template>

<script setup>
import { useIndexStore } from '@/store/model/index';

const store = useIndexStore();

const img_list = [
    require('@/assets/img/tutu1.jpg'),
    require('@/assets/img/tutu2.jpg'),
    require('@/assets/img/tutu3.jpg'),
    require('@/assets/img/tutu4.jpg'),
    require('@/assets/img/tutu5.jpg'),
    require('@/assets/img/tutu6.jpg'),
    require('@/assets/img/tutu7.jpg'),
    require('@/assets/img/tutu8.jpg'),
    require('@/assets/img/tutu9.jpg'),
    require('@/assets/img/tutu10.jpg'),
];
</script>

<style scoped lang="less">
.app_box {
    width: 100vw;
    height: 100vh;
    position: relative;
    .background {
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 1;
    }

    .login_register {
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mask {
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 3;
        background-color: rgba(0, 0, 0, 0.8);
    }
}
</style>
